<template>
  <view class="card">
	  <view v-for="(item,index) in listData" :key="index">
		<view class="card-content">
		 <view class="c-title">
			 <view class="name">{{
			   item.name
			 }}</view>
			 <view>
				 <view class="value" v-if="item.value!=='' || item.key =='zctp'">{{
				   item.value
				 }}</view>
				 <view v-else class="value2">{{item.name}}</view>
			 </view>
			 <slot :name="item.key"></slot>
		 </view>
		 <view @click="getItem(item)">
			 <!-- <slot :name="item.icon"></slot> -->
			 <u-icon v-if="item.icon=='map-fill'" :name="item.icon" color="#2979ff" size="20"></u-icon>
			 <u-icon v-else :name="item.icon" size="20"></u-icon>
		 </view>
		 <!-- <image v-if="icon" :src="icon" class="icon" mode="aspectFit"></image> -->
		
		</view>
			 <view class="underline"></view>  
	  </view>

  </view>
</template>

<script>
export default {
  props: {

    listData: {
      type: Array,
      default: ''
    }
  },
      data() {
          return {
			  
		  }
		  },
		  methods:{
			  getItem(v){
				  console.log(v)
				  this.$emit('getdata', v)
			  }
		  }
};
</script>

<style>
.card {
  background: #ffffff;          /* 白色背景 */
  border-radius: 10px;         /* 圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin: 15rpx 0rpx;                /* 卡片之间的间距 */
}
.c-title{
	display: flex;
}
.card-content {
  display: flex;               /* Flexbox 布局 */
  justify-content: space-between; /* 空间平均分配 */
  align-items: center;         /* 垂直居中 */
  padding: 35rpx 25rpx;              /* 内边距 */
}


.icon {
  width: 24px;                /* 图标宽度 */
  height: 24px;               /* 图标高度 */
}
	.name {
	  font-size: 28rpx;            /* 名称字体大小 */
	  color: #2a2a2a;                /* 名称颜色 */
	  font-weight: 500;
	  margin-right: 15rpx;
	}
	
	.value {
	  font-size: 28rpx;            /* 值字体大小 */
	  color: #2a2a2a;                /* 名称颜色 */
	  font-weight: 500;
	  margin:0 15rpx;
	}
	.value2{
		font-size: 28rpx;            /* 值字体大小 */
		color: #ccc;                /* 名称颜色 */
		font-weight: 500;
		margin:0 15rpx;
	}
.underline {
  height: 2rpx;                /* 下划线高度 */
  background: #dcdcdc;        /* 灰色 */
  width: 95%;
  margin: 0 auto ;
}
</style>
